<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 头部 -->
    <div class="header">
        <div class="header-main">
            <div class="logo-con">
                <div class="logo-main">
                    <img class="logoMove" src="./images/logo.png" alt="">
                </div>
            </div>
            <nav class="menu-con">
                <ul class="toRight">
                    <li class="menu-item"><a href="./index.html">首页</a></li>
                    <li class="menu-item"><a href="./aboutUs.html">关于我们</a></li>
                    <li class="menu-item"><a href="./newCoffee.html">饮品及美食</a></li>
                    <li class="menu-item"><a href="./news.html">新闻动态</a></li>
                    <li class="menu-item"><a href="./person.html">人才招聘</a></li>
                </ul>
            </nav>
            <h1 class="title logoMove">消磨时光 / 回味印象</h1>
        </div>
    </div>
    <!-- 新品介绍 -->
    <div class="newcoffee">
        <div class="container">
            <h3 class="intro toRight">新品介绍</h3>
            <div class="pics">
                <div class="left logoMove">
                    <img class="moveLeft" src="./images/item1.jpg">
                </div>
                <div class="right logoMove">
                    <div class="up">
                        <img src="./images/item2.jpg">
                        <img src="./images/item3.jpg">
                    </div>
                    <div class="down">
                        <img src="./images/item4.jpg">
                    </div>
                </div>
            </div>
            <div class="coffee">
                <div class="coffee-name">
                    <ul>
                        <li class="coffee-item">1862 Pre顶级咖啡豆<span class="active"></span></li>
                        <li class="coffee-item">UTA认证优质咖啡<span></span></li>
                        <li class="coffee-item">优质进口咖啡<span></span></li>
                    </ul>
                </div>
                <div class="coffee-detail">
                    <ul class="item1 item">
                        <li>
                            <div class="coffee-img"><img src="./images/1.jpg"></div>
                            <div class="detail">
                                <a href="javascript:;">UTE0 - 高级咖啡</a>
                                <p>型号 5kg 咖啡豆</p>
                                <p>品牌 AT-XX</p>
                                <P>规格 超取满1.500包邮</P>
                                <p>类型 满额赠礼；满件折扣</p>
                            </div>
                        </li>
                        <li>
                            <div class="coffee-img"><img src="./images/2.jpg"></div>
                            <div class="detail">
                                <a href="javascript:;">UTY0 - 020咖啡</a>
                                <p>型号 5kg 咖啡豆</p>
                                <p>品牌 AT-XH</p>
                                <P>规格 超取满1.500包邮</P>
                                <p>类型 满额赠礼；满件折扣</p>
                            </div>
                        </li>
                    </ul>
                    <ul class="item2 item">
                        <li>
                            <div class="coffee-img"><img src="./images/1.jpg"></div>
                            <div class="detail">
                                <a href="javascript:;">UTE1 - 高级咖啡</a>
                                <p>型号 5kg 咖啡豆</p>
                                <p>品牌 AT-XX</p>
                                <P>规格 超取满1.500包邮</P>
                                <p>类型 满额赠礼；满件折扣</p>
                            </div>
                        </li>
                        <li>
                            <div class="coffee-img"><img src="./images/2.jpg"></div>
                            <div class="detail">
                                <a href="javascript:;">UTY1 - 020咖啡</a>
                                <p>型号 5kg 咖啡豆</p>
                                <p>品牌 AT-XH</p>
                                <P>规格 超取满1.500包邮</P>
                                <p>类型 满额赠礼；满件折扣</p>
                            </div>
                        </li>
                    </ul>
                    <ul class="item3 item">
                        <li>
                            <div class="coffee-img"><img src="./images/1.jpg"></div>
                            <div class="detail">
                                <a href="javascript:;">UTE2 - 高级咖啡</a>
                                <p>型号 5kg 咖啡豆</p>
                                <p>品牌 AT-XX</p>
                                <P>规格 超取满1.500包邮</P>
                                <p>类型 满额赠礼；满件折扣</p>
                            </div>
                        </li>
                        <li>
                            <div class="coffee-img"><img src="./images/2.jpg"></div>
                            <div class="detail">
                                <a href="javascript:;">UTY2 - 020咖啡</a>
                                <p>型号 5kg 咖啡豆</p>
                                <p>品牌 AT-XH</p>
                                <P>规格 超取满1.500包邮</P>
                                <p>类型 满额赠礼；满件折扣</p>
                            </div>
                        </li>
                    </ul>
                    
                    
                </div>
            </div>
        </div>

    </div>
    <!-- 新闻 -->
    <div class="news">
        <div class="container">
            <h3 class="title toRight"><img src="./images/about.png" alt="">新闻中心<img src="./images/about.png" alt=""></h3>
            <div class="news-detail">
                <ul>
                    <li>
                        <img class="news-img logoMove" src="./images/item3.jpg">
                        <h3>打破世界记录-地球上最大杯的卡布奇诺</h3>
                        <p>一进门是大红色的拱门，XXX咖啡名称着实可爱。不经连想日本的喜饼高帽以及童话故事裡的XXX大野狼XD但今天分享的XXX是来自奥地利的咖啡品牌，这品牌在台湾算是蛮新鲜的，但在欧洲、奥地利却是百年咖啡品牌喔。没问店家，第一印象我以为是女孩！</p>
                    </li>
                    <li>
                        <img class="news-img logoMove" src="./images/item3.jpg">
                        <h3>高端咖啡厂商的合作</h3>
                        <p>一进门是大红色的拱门，XXX咖啡名称着实可爱。不经连想日本的喜饼高帽以及童话故事裡的XXX大野狼XD但今天分享的XXX是来自奥地利的咖啡品牌，这品牌在台湾算是蛮新鲜的，但在欧洲、奥地利却是百年咖啡品牌喔。没问店家，第一印象我以为是女孩！</p>
                    </li>
                    <li>
                        <img class="news-img logoMove" src="./images/item2.jpg">
                        <h3>顶级咖啡豆</h3>
                        <p>一进门是大红色的拱门，XXX咖啡名称着实可爱。不经连想日本的喜饼高帽以及童话故事裡的XXX大野狼XD但今天分享的XXX是来自奥地利的咖啡品牌，这品牌在台湾算是蛮新鲜的，但在欧洲、奥地利却是百年咖啡品牌喔。没问店家，第一印象我以为是女孩！</p>
                    </li>
                    <li>
                        <img class="news-img logoMove" src="./images/img07.jpg">
                        <h3>了解进口高端咖啡</h3>
                        <p>一进门是大红色的拱门，XXX咖啡名称着实可爱。不经连想日本的喜饼高帽以及童话故事裡的XXX大野狼XD但今天分享的XXX是来自奥地利的咖啡品牌，这品牌在台湾算是蛮新鲜的，但在欧洲、奥地利却是百年咖啡品牌喔。没问店家，第一印象我以为是女孩！</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 关于我们 -->
    <div class="aboutUs-title">
        <div class="container">
            <h3 id="aboutUs-h3" class="title toRight">
                <img src="./images/about.png" alt="">关于我们<img src="./images/about.png" alt="">
            </h3>
            <p class="aboutUs-p toRight">一进门是大红色的拱门，XXX咖啡名称着实可爱。</p>
            <p class="aboutUs-p toRight">不经连想日本的喜饼高帽以及童话故事裡的XXX大野狼XD</p>
            <p class="aboutUs-p toRight">但今天分享的XXX是来自奥地利的咖啡品牌，</p>
            <p class="aboutUs-p toRight">这品牌在台湾算是蛮新鲜的，</p>
            <p class="aboutUs-p toRight">但在欧洲、奥地利却是百年咖啡品牌喔。</p>
            <p class="aboutUs-p toRight">没问店家，第一印象我以为是女孩！</p>
        </div>
    </div>
    <!-- 顶级咖啡 -->
    <div class="topCoffee">
        <div class="container">
            <ul>
                <li><img class="logoMove" src="./images/img14.jpg"></li>
                <li>
                    <div class="logoMove">
                        <h3>顶级咖啡豆</h3>
                        <p>/ 土耳其攻打维也纳城，战败撤退后在战营留下一颗颗黑色咖啡豆，</p>
                        <p>维也纳人品尝到觉得太好喝了，反而咖啡在维也纳发扬光大 /</p>
                        <p>好一段美妙的故事，咖啡豆豆与维也纳人的相遇，罗曼蒂克。</p>
                        <p>「今日美国报」选出的十大咖啡城市，奥地利维也纳排名第一</p>
                        <button>VIEW NOW</button>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
        <div class="container">
            <ul>
                <li><a href="javascript:;">首页</a><span>|</span></li>
                <li><a href="javascript:;">产品中心</a><span>|</span></li>
                <li><a href="javascript:;">新闻动态</a><span>|</span></li>
                <li><a href="javascript:;">关于我们</a><span>|</span></li>
            </ul>
        </div>
    </div>
    <script src="js/index.js"></script>
</body>
</html>